<script setup>
import { ref } from 'vue';
import CompareOthers from './StuCompare.vue';
import Portrait from './StuPortrait.vue';
import Score from './StuScoreAnticipate.vue';

const props = defineProps({
  StuId: String
});

</script>

<template>
  <div>
    <div style="width: 100%; height: 25px;"></div>

    <div class="container">

      <div class="item">
        <Portrait :StuId="StuId"/>
      </div>

      <div class="item">
        <CompareOthers :StuId="StuId"/>
      </div>

      <div class="item">
        <Score :StuId="StuId"/>
      </div>

    </div>
  </div>

</template>

<style scoped>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 30%;
  /* 设置子项的宽度 */
  background-color: rgb(0,0,0,0.05);
  /* 设置子项的背景颜色 */
  padding: 20px;
  /* 设置子项的内边距 */
  margin: 10px;
  /* 设置子项之间的外边距 */
  box-sizing: border-box;
  /* 让内边距和边框不会增加元素的宽度 */
  border-radius: 10px;
  /* 设置边框圆角 */
}

</style>
